{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<script src="{%  static "jquery.js" %}"></script>
<script>
    $(document).ready(function(){
        function submit(action, method, values) {
                var form = $('<form/>', {
                    action: action,
                    method: method
                });
                $.each(values, function() {
                    form.append($('<input/>', {
                        type: 'hidden',
                        name: this.name,
                        value: this.value
                    }));
                });
                form.appendTo('body').submit();
            }



        $("input[name=show]").click(function(event){
            course_id=$("textarea[name=course_id]").first().val()
            grader_type=$("textarea[name=grader_type]").first().val()
            loc=$("textarea[name=location]").first().val()
            metric_type=$("select[name=metric_type]").first().find(':selected').text()
            submit("{{ajax_url}}{{post_url}}", 'POST', [
                { name: 'course_id', value: course_id},
                { name: 'location', value: loc },
                { name: 'grader_type', value: grader_type },
                { name : 'metric_type', value: metric_type},
            ]);
        });
    });

</script>

Metric type:
<select name="metric_type" class="metric_type">
    {% for i in available_metric_types %}
        <option value="{{i}}">{{i}}</option>
    {% endfor %}
</select><br/><br/>

Course id:
<textarea name="course_id" class="course_id" cols="30" rows="1">MITx/6.002x/2012_Fall</textarea><br/><br/>
Grader Type:
<textarea name="grader_type" class="grader_type" cols="20" rows="1">ML</textarea><br/><br/>
Location:
<textarea name="location" class="location" cols="30" rows="1">i4x://MITx/6.002x/problem/OETest</textarea><br/><br/>
<input type="button" value="Show" class="show-button" name="show"/>
<div id="result"></div>
</body>
</html>